<template>
	<div class="header">
		<transition name="move">
		<div class="headerTop">
				<div class="header-top" v-show="showTop">
					<span class="iconfont icon-dibiaotianchong"></span><span class="place">205国道嘉应学院江北校区</span>
				</div>
			<div class="header-bottom border-top">
				<div class="header-input">
					<span class="iconfont icon-sousuo"></span>
					搜索商家、商家名称
				</div>
			</div>
		</div>
		</transition>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				showTop: true
			}
		},
		methods: {
		handleScroll () {
			const top = document.documentElement.scrollTop
			if (top > 40) {
				this.showTop = false
			}
			else {
				this.showTop = true
			}
		}
	},
		mounted () {
			window.addEventListener('scroll',this.handleScroll)
		},
		unmounted () {
			window.removeEventListener('scroll',this.handleScroll)
		}
	}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/mixin.styl'
	.headerTop
		background-color $yellow
		width 100%
		position fixed
		z-index 10
		.header-top
			max-width 150px
			height 40px
			padding 10px 0 5px 10px
			box-sizing border-box
			color $text
			ellipsis()
			transform: translate3d(0, 0, 0)
			&.move-enter-active,&.move-leave-active
				transition all 0.5s linear
			&.move-enter,&.move-leave-to
				transform: translate3d(0, 100%, 0)
			.iconfont
				padding-right 4px
				font-size 14px
				line-height 20px
			.place
				font-size 14px
				line-height 20px
		.header-bottom
			border-top(#fff)
			height 40px
			padding-top 1px
			.header-input
				height 32px
				line-height 32px
				margin 4px 10px
				background-color $text
				border-radius 2px
				color #ccc
				text-align center
				font-size 10px
</style>